<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v3-基础</title>

</head>

<body>
    <div id="app">
        <div class="wrapper">
            <p>{{count}}</p>
            <div>arr:{{newArr}}</div>
            <button @click="click">点击</button>
        </div>

    </div>
</body>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- <script src="./index.js"></script> -->
<script>
    const { createApp, ref, computed, onMounted, reactive } = Vue;
    createApp({
        setup() {
            const count = ref(0)
            count.value = 100

            const arr = ref([])
            arr.value = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
            const click = (() => {
                count.value++
            })

            onMounted(() => {
                console.log("fazhan")
            })
           const newArr= computed(() => {
                console.log(arr)
                return arr.value.filter(item => item % 2 == 0)
            })
            return {
                count, click, newArr
            }

        }
    }).mount("#app")

</script>

</html>